<template>
  <div class="Details">
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <h2>基础信息</h2>
      <el-row>
        <el-col>
          <el-row>
            <el-col>
              <el-row>
                <h4>订单号:</h4>
                <span>{{ fromDataup.ordernumber }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>下单时间:</h4>
                <span>{{ fromDataup.ordertime }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>状态:</h4>
                <span>{{ fromDataup.state }}</span>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-row>
                <h4>店铺名称:</h4>
                <span>{{ fromDataup.clientname }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          选购商品表：
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col>
              <div class="demo-image__error">
                <div class="block">
                  <el-image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=289425228,4251178093&fm=26&gp=0.jpg">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>
            <el-col>
              <span>榴莲500g</span>
            </el-col>
            <el-col>
              <span>x1份</span>
            </el-col>
            <el-col>
              <span>￥28.5</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="demo-image__error">
                <div class="block">
                  <el-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1735331227,1817142025&fm=26&gp=0.jpg">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>
            <el-col>
              <span>葡萄500g</span>
            </el-col>
            <el-col>
              <span>x1份</span>
            </el-col>
            <el-col>
              <span>￥28.5</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="demo-image__error">
                <div class="block">
                  <el-image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=537377457,2110263769&fm=26&gp=0.jpg">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>
            <el-col>
              <span>猪肉500g</span>
            </el-col>
            <el-col>
              <span>x1份</span>
            </el-col>
            <el-col>
              <span>￥28</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <h2>配送信息</h2>
          <el-row>
            <el-col>
              <el-row>
                <h4>配送方式:</h4>
                <span>{{ fromDataup.distribution }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>收获地址:</h4>
                <span>{{ fromDataup.commoditylist }}</span>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-row>
                <h4>联系人:</h4>
                <span>{{ fromDataup.consignee }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>电话:</h4>
                <span>{{ fromDataup.phone }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <h2>费用统计</h2>
          <el-row>
            <el-col>
              <el-row>
                <h4>包装费:</h4>
                <span>{{ fromDataup.packaging }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>活动优惠:</h4>
                <span>{{ fromDataup.discounts }}</span>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-row>
                <h4>优惠卷:</h4>
                <span>{{ fromDataup.discountsticket }}</span>
              </el-row>
            </el-col>
            <el-col>
              <el-row>
                <h4>配送费:</h4>
                <span>{{ fromDataup.distributioncost }}</span>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-row>
                <span class="redfaster">合计:</span>
                <h1 class="redsize">￥80</h1>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="cancel">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Details',
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    fromDataup: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      value: '',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:dialogVisible', false);
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.Details {
  .el-row {
    display: flex;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    .el-col {
      font-weight: 400;
      .el-image {
        .el-icon-picture-outline {
          font-size: 20px;
        }
      }
      .el-row {
        display: flex;
        align-items: center;
        border-top: 0;
        padding-bottom: 10px;
        .el-col {
          margin-top: 30px;
          span {
              color: #FA541C;
          }
          .el-row {
              .redfaster {
                  font-size: 30px;
              }
              .redsize {
                  margin-left: 50px;
                  color: #FA541C;
                  font-size: 60px;
              }
              span {
                  margin-left: 20px;
              }
          }
        }
      }
    }
  }
 ::v-deep .el-image {
      margin-right: 30px;
  }
}
</style>
